<template>
    <div class="gva-form-box">
        <div class="w-form-box">
            <div class="list-header">基础信息</div>
            <el-form
                :model="formData"
                ref="elFormRef"
                label-position="right"
                :rules="rule"
                label-width="120px"
                :inline="true"
                class="form-inline"
            >
                <!-- 款式编号 -->
                <el-form-item
                    :label="`${il8n('kuanshibianhao.label')}:`"
                    prop="styleNum"
                >
                    <el-select
                        v-model="formData.styleNum"
                        :clearable="true"
                        :placeholder="il8n('kuanshibianhao.placeholder')"
                    >
                        <el-option
                            v-for="item in productStylesList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 显示编号 -->
                <el-form-item
                    :label="`${il8n('chima.label')}:`"
                    prop="styleNum"
                >
                    <el-select
                        v-model="formData.firstOrderNum"
                        :clearable="true"
                        :placeholder="il8n('chima.placeholder')"
                    >
                        <el-option
                            v-for="item in productStylesList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 审批流程 -->
                <el-form-item
                    :label="`${il8n('shenpiliucheng.label')}:`"
                    prop="approvalProcess"
                >
                    <el-select
                        v-model="formData.approvalProcess"
                        :clearable="true"
                        :placeholder="il8n('shenpiliucheng.placeholder')"
                    >
                        <el-option
                            v-for="item in dictOptions.approvalProcess"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 图纸编号 -->
                <el-form-item
                    :label="`${il8n('tupianbianhao.label')}:`"
                    prop="num"
                >
                    <el-input
                        v-model="formData.num"
                        :placeholder="il8n('tupianbianhao.placeholder')"
                        disabled
                    />
                </el-form-item>
                <!-- 图纸分类 -->
                <el-form-item
                    :label="`${il8n('tuzhifenlei.label')}:`"
                    prop="styleNum"
                >
                    <el-select
                        v-model="formData.firstOrderNum"
                        :clearable="true"
                        :placeholder="il8n('tuzhifenlei.placeholder')"
                    >
                        <el-option
                            v-for="item in productStylesList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 分类 -->
                <el-form-item
                    :label="`${il8n('fenlei.label')}:`"
                    prop="styleNum"
                >
                    <el-select
                        v-model="formData.firstOrderNum"
                        :clearable="true"
                        :placeholder="il8n('fenlei.placeholder')"
                    >
                        <el-option
                            v-for="item in productStylesList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 资料类型 -->
                <el-form-item
                    :label="`${il8n('ziliaoleixing.label')}:`"
                    prop="dataType"
                >
                    <el-select
                        v-model="formData.dataType"
                        :clearable="true"
                        :placeholder="il8n('ziliaoleixing.placeholder')"
                    >
                        <el-option
                            v-for="item in dictOptions.dataType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 结构 -->
                <el-form-item
                    :label="`${il8n('jiegou.label')}:`"
                    prop="construction"
                >
                    <el-select
                        v-model="formData.construction"
                        :clearable="true"
                        :placeholder="il8n('jiegou.placeholder')"
                    >
                        <el-option
                            v-for="item in dictOptions.construction"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item
                    :label="`${il8n('beizhu.label')}:`"
                    prop="styleNum"
                    style="width: 100%"
                >
                    <el-input
                        v-model="formData.styleNum"
                        :placeholder="il8n('beizhu.placeholder')"
                        :clearable="true"
                        type="textarea"
                        style="width: calc(50% - 76px)"
                        :row="5"
                    />
                </el-form-item>
                <el-form-item
                    :label="`${il8n('zizhipeijian.label')}:`"
                    prop="zizhi"
                    style="width: 100%"
                >
                    <el-checkbox-group v-model="formData.zizhi">
                        <el-checkbox
                            label="SH/PDC03054-A"
                            value="SH/PDC03054-A"
                        />
                        <el-checkbox
                            label="SH/MTO9371-A"
                            value="SH/MTO9371-A"
                        />
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {
    createDdmsSpecDrawing,
    updateDdmsSpecDrawing,
    findDdmsSpecDrawing,
} from "@/api/plmDdmsSpecDrawing";

defineOptions({
    name: "DdmsSpecDrawingForm",
});

// 自动获取字典
import { getDictFunc } from "@/utils/format";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";

const route = useRoute();
const router = useRouter();

const type = ref("");
const formData = ref({
    productSpecNum: "",
    projectNum: "",
    cumstomerNum: "",
    customerStyleNum: "",
    localStyleNum: "",
    updateUser: "",
});
// 验证规则
const rule = reactive({});

const elFormRef = ref();

// 初始化方法
const init = async () => {
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (route.query.id) {
        const res = await findDdmsSpecDrawing({ ID: route.query.id });
        if (res.code === 0) {
            formData.value = res.data.reddmsSpecDrawing;
            type.value = "update";
        }
    } else {
        type.value = "create";
    }
};

init();
// 保存按钮
const save = async () => {
    elFormRef.value?.validate(async (valid) => {
        if (!valid) return;
        let res;
        switch (type.value) {
            case "create":
                res = await createDdmsSpecDrawing(formData.value);
                break;
            case "update":
                res = await updateDdmsSpecDrawing(formData.value);
                break;
            default:
                res = await createDdmsSpecDrawing(formData.value);
                break;
        }
        if (res.code === 0) {
            ElMessage({
                type: "success",
                message: "创建/更改成功",
            });
        }
    });
};

// 返回按钮
const back = () => {
    router.go(-1);
};
</script>

<style>
</style>
